<template>
<Form ref="form" v-slot="{ errors }" @submit="postRegister">
  <div class="space-y-2">   
    <edit-item 
        key-name="message_code"
        v-model="registerStore.row.message_code"
        :options="{name:'消息验证码', rules: 'required|length:6|integer',title:'已发送至'+(registerStore.contactType=='email'?registerStore.row.email:registerStore.row.mobile_phone)}">  
        <template #input-item="props">
        <div class="flex gap-2">
            <input
                type="text"
                placeholder="请输入验证码"
                class="input input-bordered flex-1"
                :class="{'input-error':props.errorMessage}"
                v-bind="props.field"
            />
            <button type="button" 
              class="btn btn-outline btn-primary" 
              :disabled="registerStore.countdown > 0" 
              @click="registerStore.goToStep($router,1)">
                <i class="fa fa-send mr-1"></i>
                {{ registerStore.countdown > 0 ? `${registerStore.countdown}秒后重发` : '发送验证码' }}
            </button>
        </div>
        </template>                 
    </edit-item>
     <edit-item 
          key-name="uname"
          v-model="registerStore.row.uname"
          :options="{name:'用户名', rules: 'required|user_name'}">                   
      </edit-item>
       <edit-item 
          key-name="password"
          v-model="registerStore.row.password"
          :options="{name:'密码', rules: 'required|min:6|max:18'}">    
          <template #input-item="props">
            <password-edit v-bind="props.field" random="true" :class="{'input-error':props.errorMessage}" />
          </template>    
      </edit-item>
       <edit-item 
          key-name="password_confirmation"
          v-model="registerStore.row.password_confirmation"
          :options="{name:'确认密码', rules: 'required|confirmed:@password',type:'password'}">                   
      </edit-item>

      <Field name="agree" 
            v-model="registerStore.row.agree" 
            rules="accepted"
             v-slot="{ field, errors, errorMessage }"
             >
        <label class="cursor-pointer label justify-start">
          <input type="checkbox"
            class="checkbox checkbox-sm"
            :class="errorMessage?'checkbox-error':''"
             v-bind="field" 
             :value="1"
             />
          <span class="label-text ml-2 text-sm" :class="errorMessage?'text-error':''">
              我已阅读并同意 <a href="#" class="text-primary hover:underline">用户协议</a> 和
              <a href="#" class="text-primary hover:underline">隐私政策</a>
          </span>
        </label>
        <p class="text-error" v-show="errorMessage">
            {{errorMessage}}
        </p>
      </Field>
      <div v-show="false">
         <edit-item 
            v-if="registerStore.contactType === 'mobile_phone'"
            key-name="mobile_phone"
            v-model="registerStore.row.mobile_phone"
            :options="{name:'手机号', rules: 'required|mobile_phone'}">                   
        </edit-item>
        <edit-item 
            v-else
            key-name="email"
            v-model="registerStore.row.email"
            :options="{name:'电子邮箱', rules: 'required|email'}">                   
        </edit-item>
      </div>
  </div>
  <div class="flex justify-between mt-6">
      <button type="button" class="btn btn-outline" @click="registerStore.goToStep($router,1)">
        <font-awesome-icon icon="arrow-left" class="mr-1"></font-awesome-icon>
        上一步
      </button>
      <button type="submit" class="btn btn-primary">
        <font-awesome-icon icon="check-circle"></font-awesome-icon>立即注册
      </button>
  </div>
</Form>
</template>

<script>
import { Form,Field } from 'vee-validate';
import {editItem,passwordEdit} from '@/extensions/components'
import {useRegisterStore} from '@/pages/guest/register/register'
import {useUserStore} from '@/stores/user'
import Cookies from 'js-cookie'
const registerStore = useRegisterStore();
const userStore = useUserStore();
export default {
  components: {
    Form,
    editItem,
    Field,
    passwordEdit
  },
  data() {
    return {
      registerStore,
      sending:false,
      userStore,
    }
  },
  computed: {
  
  },
  methods: {
    async postRegister(values){
      if(this.sending){
            return;
        }
        this.sending = true;
        //发送短信验证码
        let response
        try{
            response = await this.$request.post('/open/register',values);
        }catch(error){
            if (error.response) {
                response = error.response;
            }
        }
        if(response){
           const data = response.data;
            if(response.status==200){
                this.userStore.loginSuccess(data,this.$router);
            }else if(response.status==422){
                collect(data.errors).each((item,field) => {
                    let message = item;
                    if(typeof item!=='string'){
                        message = collect(item).implode(';');
                    }
                    this.$refs.form.setFieldError(field, message);
                });
            }
        }
        this.sending = false;
   
    }
  }
}
</script>
